<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>发票</title>
</head>
<style type="text/css">
    @page {
        margin-top: 23px;
        margin-left: 16px;
        margin-bottom: 0px;
        margin-right: 18px;
    }

    body,
    ol,
    ul,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    th,
    td,
    dl,
    dd,
    form,
    fieldset,
    legend,
    input,
    textarea,
    select,
    td {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    html,
    body {
        /* font: 16px "microsoft yahei"; */
        word-wrap: break-word;
        background-color: #eeeeee;
    }

    a,
    u,
    s,
    del {
        color: #666;
        text-decoration: none;
    }

    fieldset,
    a img,
    .bor0 {
        border: 0;
    }

    i,
    em,
    b {
        font-style: normal;
        font-weight: 100;
    }

    li {
        list-style: none;
    }

    img {
        vertical-align: middle;
    }

    table {
        border-collapse: collapse;
    }

    .ind2 {
        text-indent: 2em;
    }

    textarea {
        resize: none;
    }

    textarea,
    input {
        outline: 0;
    }

    .valign {
        text-align: center;
    }

    .valign img {
        vertical-align: middle;
    }

    .valign:after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    .over {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clear:after {
        content: "";
        clear: both;
        display: block;
    }

    .clear:before {
        content: "";
        display: table;
    }

    /* -------------以上为清除自带样式--------------- */
    label {
        color: #86312a;
    }

    .invoiceMainWrapper {
        /* height: auto !important; */
        /* min-height: 506px; */
        width: 762px;
        margin: 0px auto;
        font-family: "kaiTi";
        font-size: 9pt;
        color: #040404;
        /* padding: 22px 17px 27px 17px; */
        /* box-sizing: border-box; */
        /* border: #04f68d solid 0.5px; */
        background-color: rgb(255, 255, 255);
        /* background-image: url("bg.jpg"); */
        /* background-repeat: no-repeat; */
        /* background-size: contain; */
        /* background-size: 760px 482px; */
    }

    /* -------头部部分---------- */
    .invoiceHeaderWrapper {
        height: 91px;
        width: 760px;
        display: flex;
        /* justify-content: space-between; */
        padding: 0px;
        /* border: 1px solid red; */
    }

    .headerLeft {
        width: 190px;
        height: 73px;
        /* border: 1px solid #86312a; */
        display: flex;
        /*display: -webkit-box;*/
        /*-webkit-box-align: center;*/
        margin-left: 9px;
        margin-top: 3px;
        align-items: center
    }

    .headerLeft2 {
        margin-left: 8px;
        max-width: 109px;
        text-align: center;
    }

    .headerLeftQrcode {
        width: 73px;
        height: 73px;
    }

    .headerLeftTag {
        font-family: 'SimSun';
        /*margin-left: 10px;*/
    }

    .headerMiddle {
        height: 82px;
        width: 366px;
        /* border: 1px solid #86312a; */
        position: relative;
    }

    .headerMiddleTitle {
        font-size: 20pt;
        color: #86312a;
        font-family: "kaiTi";
        margin-top: 4px;
        text-align: center;
        letter-spacing: 1px;
        /* line-height: 18px; */
    }

    .line {
        height: 3px;
        width: 73%;
        border-top: #86312a 1px solid;
        border-bottom: #86312a 1px solid;
        text-align: center;
        margin: 0px auto;
        margin-top: 6px;
    }

    .yingzhangWrapper {
        width: 112px;
        height: 75px;
        /* border: 1px solid #ed3a29; */
        left: 124px;
        top: 6px;
        position: absolute;
    }

    .yingzhang {
        width: 112px;
        height: 75px;
        position: absolute;
    }

    .headerRight {
        width: 195px;
        height: 57px;
        font-family: "kaiTi";
        font-size: 12px;
        /* border: 1px solid #86312a; */
        margin-top: 13px;
        word-wrap: break-word;
    }

    .headerRight li {
        line-height: 25px;
    }

    .invoiceContentWrapper {
        border: 1px solid #86312a;
        /* width: 99.8%; */
        width: 759px;
    }

    /* -------购方、销方信息部分---------- */
    .invoiceMessageWrapper {
        padding: 0px;
        height: 82px;
        width: 100%;
        border-bottom: #86312a 1px solid;
        display: flex;
    }

    .messageLeft {
        height: 82px;
        width: 50%;
        display: flex;
        align-items: center;
    }

    .messageLeftTitle {
        height: 60px;
        width: 23px;
        text-align: center;
        line-height: 13px;
        vertical-align: middle;
        color: #86312a;
        font-size: 9pt;
    }

    .messageLeftContent {
        width: 100%;
        height: 82px;
        border-left: 1px solid #86312a;
        border-right: 1px solid #86312a;
        padding-left: 2px;
        font-size: 9pt;
    }

    .messageRight {
        height: 82px;
        width: 50%;
        /* background-color: rgb(127, 197, 255); */
        display: flex;
        align-items: center;
    }

    .messageRightTitle {
        height: 60px;
        width: 23px;
        text-align: center;
        line-height: 13px;
        vertical-align: middle;
        color: #86312a;
        font-size: 9pt;
    }

    .messageRightContent {
        width: 100%;
        height: 82px;
        border-left: 1px solid #86312a;
        padding-left: 2px;
        font-size: 9pt;
    }

    /* -------金额部分---------- */
    .invoicAmountWrapper {
        padding: 0px;
        height: 29px;
        width: 759px;
        /* background-color: beige; */
        display: flex;
    }

    .daxieTileWrapper {
        width: 528px;
        height: 29px;
        display: flex;
    }

    .daxieTile {
        width: 215px;
        height: 29.5px;
        line-height: 29.5px;
        color: #86312a;
        text-align: center;
        border-right: #86312a 1px solid;
    }

    .daxieTileIcon {
        width: 16px;
        height: 15px;
        margin-top: 5px;
        margin-left: 6px;
        border-radius: 50%;
        border: #000000 1.1px solid;
        position: relative;
    }

    .daxieTileIcon::before {
        content: "";
        display: block;
        left: 8px;
        top: 7px;
        width: 16px;
        height: 1px;
        background: #000000;
        position: absolute;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .daxieTileIcon::after {
        content: "";
        display: block;
        left: 8px;
        top: 7px;
        width: 16px;
        height: 1px;
        background: #000000;
        position: absolute;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .daxieTileNumber {
        margin-left: 2px;
        display: block;
        width: 325px;
        height: 29.5px;
        line-height: 29.5px;
    }

    .xiaoxieTitleWrapper {
        width: 230px;
        height: 29.5px;
    }

    .xiaoxieTitle {
        width: 42.5px;
        height: 29.5px;
        line-height: 29.5px;
        color: #86312a;
        text-align: center;
    }

    /* -------备注部分---------- */
    .invoicBeizhuWrapper {
        padding: 0px;
        height: 73px;
        width: 759px;
        border-top: #86312a 1px solid;
        /* background-color: rgb(174, 174, 33); */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .beizhuTitle {
        height: 73px;
        width: 22px;
        display: flex;
        /* align-items: center; */
    }

    .beizhuTitle span {
        height: 41px;
        width: 22px;
        color: #86312a;
        font-size: 9pt;
        text-align: center;
        line-height: 24px;
        margin-top: 11px;
    }

    .beizhuContent {
        padding-left: 5px;
        width: 100%;
        height: 73.5px;
        border-left: #86312a 1px solid;
        font-family: "SimSun";
        word-wrap: break-word;
    }

    .invoiceFooterWrapper {
        padding: 0px;
        padding-left: 57px;
        padding-top: 20px;
        height: 36px;
        width: 100%;
        display: flex;
        /* background-color: aqua; */
    }

    .footerTitle {
        color: #86312a;
    }

    .footerContent {
        margin-left: 5px;
        font-family: "SimSun";
    }

    /* -------商品清单部分---------- */
    .invoiceBodyWrapper {
        /* padding: 0px; */
        height: auto !important;
        width: 759px;
        min-height: 160px;
        border-bottom: #86312a 1px solid;
        position: relative;
    }

    .transportInfoWrapper {
        /* padding: 0px; */
        height: auto !important;
        width: 759px;
        min-height: 80px;
        border-bottom: #86312a 1px solid;
        position: relative;
    }

    .goodsTableHeader {
        width: 759px;
        height: 18px;
        /* border-bottom: #86312a 1px solid; */
        line-height: 19px;
    }

    .immovableLeaseTableHead {
        width: 759px;
        height: 18px;
        /* border-bottom: #86312a 1px solid; */
        line-height: 19px;
    }

    .goodsTable {
        width: 759px;
        border-collapse: collapse;
        height: 100%;
        margin-bottom: 25px;
    }

    .immovableLeaseTable {
        width: 759px;
        border-collapse: collapse;
        height: 100%;
        margin-bottom: 25px;
    }

    .goodsTable td {
        /* border-right: 1px solid #86312A; */
        color: #060606;
    }

    .immovableLeaseTable td {
        color: #060606;
        font-family: "SimSun";
        word-break: break-all;
        vertical-align: text-top;
    }

    .goodsTableTr {
        height: 15px;
        line-height: 15px;
        /* border-bottom: #86312a 1px solid; */
    }

    .immovableLeaseTableTr {
        height: 15px;
        line-height: 15px;
        /* border-bottom: #86312a 1px solid; */
    }

    .goodsNameCol {
        text-align: left;
        width: 114px;
    }

    .realPropertyRightNoCol {
        text-align: left;
        width: 148px;
    }

    .goodsUnitCol {
        text-align: center;
        width: 60px;
    }

    .goodsQuantityCol {
        text-align: right;
        width: 86px;
    }

    .goodsPriceCol {
        text-align: right;
        width: 86px;
    }

    .goodsTotalPriceCol {
        text-align: right;
        width: 89px;
    }

    .goodsTaxRateCol {
        text-align: center;
        width: 87px;
    }

    .goodsTaxCol {
        text-align: right;
        width: 89px;
    }

    .total {
        width: 759px;
        height: 15px;
        line-height: 15px;
        display: flex;
        bottom: 0px;
        position: absolute;
        /* border-top: #86312a 1px solid; */
    }

    .totalHeji {
        width: 235px;
        height: 15px;
        text-align: center;
        letter-spacing: 41px;
        color: #86312a;
        /* background-color: aquamarine; */
        /* border-right: #86312a 1px solid; */
    }

    .totalJIne {
        width: 327px;
        height: 15px;
        /* background-color: aqua; */
        /* border-right: #86312a 1px solid; */
        text-align: right;
    }

    .totalShuie {
        width: 197px;
        text-align: right;
        /* background-color: #666; */
        /* border-right: #86312a 1px solid; */
    }

    .yellowLine {
        width: 1.5px;
        height: 50%;
        background-color: rgb(246, 237, 225);
    }

    .coffeLine {
        width: 1.5px;
        height: 50%;
        background-color: rgb(118, 89, 84);
    }

    .lineWrapper {
        display: flex;
    }

    .lineContent {
    }
</style>
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
<body>
<div class="invoiceMainWrapper">
    <div class="invoiceHeaderWrapper">
        <div class="headerLeft">
            <div>
                <img
                        class="headerLeftQrcode"
                        id="headerLeftQrcode"
                        src="data:image/png;base64,"
                        alt=""
                />
            </div>
            <div class="headerLeft2">
                <span class="headerLeftTag" id="headerLeftTag"></span>
            </div>
        </div>
        <div class="headerMiddle">
            <div class="headerMiddleTitle" id="headerMiddleTitle">
                电子发票<span style="font-family: 'Courier New'; font-size: 20pt"
            >（<span id="invoiceType" style="width: 4px"></span></span
            ><span
                    style="font-family: 'Courier New'; font-size: 20pt"
            ><span style="width: 4px"></span>）</span
            >
            </div>
            <div class="line"></div>
            <div class="yingzhangWrapper">
                <img
                        class="yingzhang"
                        id="invoiceStamp"
                        src=""
                        alt=""
                />
            </div>
        </div>
        <div class="headerRight">
            <div style="display: flex; line-height: 25px">
                <label>发票号码:</label>
                <span id="invoiceNo" style="font-family: 'SimSun'; font-size: 12px"
                ></span
                >
            </div>
            <div style="display: flex; line-height: 25px">
                <label>开票日期:</label>
                <span id="invoiceDate" style="font-family: 'SimSun'"></span>
            </div>
            <div style="line-height: 25px; text-align: right;">
                <span id="invoiceTotalPage" style="font-family: 'SimSun'"></span>
                <span id="invoiceCurrentPage" style="font-family: 'SimSun'"></span>
            </div>
        </div>
    </div>
    <div class="lineWrapper">
        <div class="invoiceContentWrapper">
            <div class="invoiceMessageWrapper">
                <div class="messageLeft">
                    <span class="messageLeftTitle"> 购买方信息 </span>
                    <div class="messageLeftContent">
                        <div
                                style="
                  line-height: 29px;
                  width: 100%;
                  display: inline-block;
                  margin-top: 15px;
                "
                        >
                            <label style="font-size: 9pt"> 名称:</label>
                            <span id="buyerName" style="font-family: 'SimSun'"
                            ></span
                            >
                        </div>
                        <div style="line-height: 24px; display: flex; width: 100%">
                            <label
                                    style="
                    font-size: 9pt;
                    display: inline-block;
                    /* width: 160px; */
                    /*transform: scale(0.92);*/
                    /*transform-origin: 0 0;*/
                    /*margin-left: -7px;*/
                  "
                            >
                                统一社会信用代码/纳税人识别号:</label
                            >
                            <div id="buyerTaxNo"
                                 style="font-family: 'Courier New';
                                  font-size: 12pt;
                                   /*margin-left: -7px;*/
">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="messageRight">
                    <span class="messageRightTitle">销售方信息</span>
                    <div class="messageRightContent">
                        <div
                                style="
                  line-height: 29px;
                  width: 100%;
                  display: inline-block;
                  margin-top: 15px;
                "
                        >
                            <label style="font-size: 9pt"> 名称:</label>
                            <span id="sellerName" style="font-family: 'SimSun'"
                            ></span
                            >
                        </div>
                        <div style="line-height: 24.5px; display: flex; width: 100%">
                            <label
                                    style="
                    font-size: 9pt;
                    display: inline-block;
                    /*transform: scale(0.92);*/
                    /*transform-origin: 0 0;*/
                    /*margin-left: -7px;*/
                  "
                            >统一社会信用代码/纳税人识别号:</label
                            >
                            <div id="sellerTaxNo"
                                 style="font-family: 'Courier New';
                                 font-size: 12pt;
                                 /*margin-left: -7px;*/
"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="invoiceBodyWrapper">
                <table class="immovableLeaseTable">
                    <thead class="immovableLeaseTableHead">
                    <tr>
                        <td class="goodsName"
                            style="color: #86312a;
                            font-family: kaiTi;
                            text-align: center;
                            width: 114px;">
                            项目名称
                        </td>
                        <td class="realPropertyRightNo"
                            style="color: #86312a;
                            font-family: kaiTi;
                            text-align: center;
                            width: 148px;">
                            产权证书/不动产权证号
                        </td>
                        <td class="goodsUnit"
                            style="color: #86312a;
                            font-family: kaiTi;
                            text-align: center;
                            width: 60px;">
                            面积单位
                        </td>
                        <td class="goodsQuantity"
                            style="color: #86312a;
                            font-family: kaiTi;
                            text-align: right;
                            width: 86px;">
                            数量
                        </td>
                        <td class="goodsPrice"
                            style="color: #86312a;
                            font-family: kaiTi;
                            text-align: right;
                            width: 86px;">
                            单价
                        </td>
                        <td class="goodsTotalPrice "
                            style="color: #86312a;
                            font-family: kaiTi;
                            text-align: right;
                            width: 89px;">
                            金额
                        </td>
                        <td class="goodsTaxRate"
                            style="color: #86312a;
                            font-family: kaiTi;
                            text-align: center;
                            width: 87px;">
                            税率/征收率
                        </td>
                        <td class="goodsTax"
                            style="color: #86312a;
                            font-family: kaiTi;
                            text-align: right;
                            width: 89px;">
                            税额
                        </td>
                    </tr>
                    </thead>
                    <tbody id="immovableLeaseTableBody"></tbody>
                </table>
                <div class="total">
                    <div class="totalHeji">
                        合计
                    </div>
                    <div class="totalJIne">
                        <span style="font-family: 'Courier New'; font-size: 10pt">¥</span>
                        <span id="totalAmount"
                              style="font-family: 'SimSun';
                               font-size: 9pt;
                               /*margin-left: -5px*/
"
                        ></span
                        >
                    </div>
                    <div class="totalShuie">
                        <span style="font-family: 'Courier New'; font-size: 10pt">¥</span>
                        <span id="totalTax"
                              style="font-family: 'SimSun';
                              font-size: 9pt;
                               /*margin-left: -5px*/
"
                        ></span
                        >
                    </div>
                </div>
            </div>
            <div class="invoicAmountWrapper">
                <div class="daxieTileWrapper">
                    <div class="daxieTile">价税合计（大写）</div>
                    <span class="daxieTileIcon"></span>
                    <span id="totalPriceTaxAmountInWords" class="daxieTileNumber" style="font-family: 'SimSun'"></span>
                </div>
                <div class="xiaoxieTitleWrapper">
                    <label class="xiaoxieTitle">(小写)</label>
                    <span style="font-family: 'Courier New'; font-size: 11pt">¥</span>
                    <span id="totalPriceTaxAmount"
                          style="font-size: 11pt; font-family: 'SimSun'; margin-left: -5px"
                    ></span
                    >
                </div>
            </div>
            <div class="invoicBeizhuWrapper">
                <div class="beizhuTitle">
                    <span>备注</span>
                </div>
                <div id="invoiceRemark" class="beizhuContent"></div>
            </div>
        </div>
        <div class="lineContent">
            <div class="yellowLine"></div>
            <div class="coffeLine"></div>
        </div>
    </div>
    <div class="invoiceFooterWrapper">
        <div class="footerTitle">开票人:</div>
        <span id="drawer" class="footerContent"></span>
    </div>
</div>
</body>
</html>